<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>happy birthday : ）</title>
    </title>
    <link rel="stylesheet" href="style.css">
    <style>
    .game-intro-section {
        background: #f8f8f8;
        margin: 30px auto 0 auto;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        max-width: 600px;
        padding: 24px 32px 18px 32px;
        text-align: center;
    }
    .game-intro-section h2 {
        font-size: 1.5em;
        color: #e67e22;
        margin-bottom: 10px;
    }
    .game-intro-section p {
        font-size: 1.1em;
        color: #444;
        margin: 0;
    }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <div class="logo"> 玩个小游戏</div>
            <nav>
                <a href="#">选个游戏开始吧！</a>
            </nav>
        </div>
    </header>

    <main>
        <!-- 新增：游戏介绍模块 -->
        <section class="game-intro-section">
            <div class="game-intro-container">
                <h2>游戏介绍</h2>
                <p>点击随机玩个小游戏，进行小游戏的选择，然后小游戏中输了的点击下面的真心话大冒险模块进行惩罚（有机会获得奖励哦）</p>
            </div>
        </section>

        <!-- 随机小游戏板块（提前） -->
        <section class="game-random-section">
            <div class="game-random-container">
                <div id="gameDisplay" class="game-display">点击下方按钮，随机选择一个小游戏！</div>
                <button id="randomGameButton" class="game-random-btn">随机玩个游戏</button>
                <div id="gameIntro" class="game-intro"></div>
            </div>
        </section>

        <!-- 真心话大冒险转盘区（后移） -->
        <section id="lottery" class="lottery-section">
            <div class="container">
                <h1 id="mainTitle"> ——         ——</h1>
                <h1 id="modeTitle" style="display:none;"></h1>
                <div class="mode-selector">
                    <button id="truthModeButton" class="mode-button truth-button">真心话</button>
                    <button id="dareModeButton" class="mode-button dare-button">大冒险</button>
                </div>
                <div class="lottery-wheel" style="display: none;"> <!-- Initially hidden -->
                    <canvas id="wheelCanvas" width="300" height="300"></canvas> <!-- 调整了尺寸以适应新布局 -->
                </div>
                <button id="spinButton">随机选择</button>
                <div class="result">
                    <p>结果: <span id="resultText">---</span></p>
                </div>
                <div class="instructions" style="display: none;"> <!-- Initially hidden -->
                    <p>点击按钮，看看你的命运是什么！</p>
                </div>
                <button id="backToModeSelectionButton" style="display: none; margin-top: 15px;">返回模式选择</button>
            </div>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 hasencodework present</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>